<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
		<script src="./jquery-3.2.1.js"></script>
		<script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	</head>
	<baby>
		<div class="container">
			<form>
				<div class="row" style="text-align: center;">
					<h1>统一建模语言理论测试</h1>
				</div>
				<div class="row">
					<div class="col-xs-4">
						<p>考试科目：统一建模语言</p>
					</div>
					<div class="col-xs-4">
						<p>时间：100分钟</p>
					</div>
					<div class="col-xs-4" >
						<p>得分：<span id="score">100</span></p>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-4">
						<div class="input-group">
							<span class="input-group-addon">班级</span>
							<input type="text" class="form-control">
						</div>
					</div>
					<div class="col-xs-4">
						<div class="input-group">
							<span class="input-group-addon">学号</span>
							<input type="text" class="form-control">
						</div>
					</div>
					<div class="col-xs-4">
						<div class="input-group">
							<span class="input-group-addon">姓名</span>
							<input type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="row">
					<h2>一丶填空题（每空5分，共20分）</h2>
					<div class="row">
						<p class="col-xs-3">1.UML的中文全称是：</p><input type="text" class="col-xs-3" name="blank"></br>
						</br>
					</div>
					<div class="row">
						<p class="col-xs-3">2.对象最突出的特征是：</p> <input type="text" class="col-xs-3" name="blank"><input type="text" class="col-xs-3" name="blank"><input type="text" class="col-xs-3" name="blank">
					</div>
				</div>
				<div class="row">
					<h2>二丶选择题（每题10分，共20分）</h2>
					<div class="col-xs-12">
						<p>1.UML与软件工程的关系是:</p>
						<div style="margin-left: 50px;">
							<input type="radio" name="one" />A<br/>
							<input type="radio" name="one" />B<br/>
							<input type="radio" name="one" />C.correct<br/>
							<input type="radio" name="one" />D
						</div>
					</div>
					<div class="col-xs-12">
						<p>2.Java语言支持:</p>
						<div style="margin-left: 50px;">
							<input type="radio" name="two" />A<br/>
							<input type="radio" name="two" />B<br/>
							<input type="radio" name="two" />C.correct<br/>
							<input type="radio" name="two" />D
						</div>
					</div>
				</div>
				<div class="row">
					<h2>三丶多选题（每题10分，共20分）</h2>
					<div class="col-xs-12">
						<p>1.用例的粒度分为以下哪三种：</p>
						<div style="margin-left: 50px;">
							<input type="checkbox" name="checkone" />A<br/>
							<input type="checkbox" name="checkone" />B<br/>
							<input type="checkbox" name="checkone" />C.correct<br/>
							<input type="checkbox" name="checkone" />D.correct
						</div>
					</div>
					<div class="col-xs-12">
						<p>2.类图由以下哪三部分组成：</p>
						<div style="margin-left: 50px;">
							<input type="checkbox" name="checktwo" />A<br/>
							<input type="checkbox" name="checktwo" />B<br/>
							<input type="checkbox" name="checktwo" />C.correct<br/>
							<input type="checkbox" name="checktwo" />D.correct
						</div>
					</div>
				</div>
				<div class="row">
					<h2>四丶判断题（每题10分，共20分）</h2>
					<div class="col-xs-12">
						<p>
							1.用例图只是用于和客服交流和沟通的，用于确定需求。&nbsp;<input type="radio" name="judgeone"/>√<input type="radio" name="judgeone"/>×<br/>
					</div>
					<div class="col-xs-12">
						<p>
							2.在状态图中，终止状态在一个状态图中允许有任意多个。&nbsp;<input type="radio" name="judgetwo"/>√<input type="radio" name="judgetwo"/>×<br/>

					</div>
				</div>
				<div class="row">
					<h2>五丶简答题（每题20分，共20分）</h2>
					<div class="col-xs-12">
						<p>1.简述什么是模型以及模型的表现形式</p>
						<div style="margin-left: 20px;">
							<textarea name="text" style="width:800px;height:150px;" ></textarea>
						</div>
					</div>
				</div>
				<p><input type="button" id="button" value="计分"></p>
			</form>
		</div>
	</baby>
	<script>
		let btn=document.getElementById("button");
		btn.addEventListener("click",function(){
			let score=document.getElementById("score");
			score.innerHTML=100;
			let blank=document.getElementsByName("blank");
			
			for(let i=0;i<blank.length;i++){
			score.innerHTML=(blank[i].value==1)?score.innerHTML:score.innerHTML-=5;
			}
			
			let radioone=document.getElementsByName("one");
			score.innerHTML=(radioone[3].checked)?score.innerHTML:score.innerHTML-=10;
			let radiotwo=document.getElementsByName("two");
			score.innerHTML=(radiotwo[3].checked)?score.innerHTML:score.innerHTML-=10;
			
			let checkboxone=document.getElementsByName("checkone");
			score.innerHTML=((checkboxone[2].checked)&&(checkboxone[3].checked))?score.innerHTML:score.innerHTML-=10;
			let checkboxtwo=document.getElementsByName("checktwo");
			score.innerHTML=((checkboxtwo[2].checked)&&(checkboxtwo[3].checked))?score.innerHTML:score.innerHTML-=10;
			
			let judgeone=document.getElementsByName("judgeone");
			score.innerHTML=(judgeone[1].checked)?score.innerHTML:score.innerHTML-=10;
			let judgetwo=document.getElementsByName("judgetwo");
			score.innerHTML=(judgetwo[1].checked)?score.innerHTML:score.innerHTML-=10;
			
			let textone=document.getElementsByName("text")[0].value;
			score.innerHTML=(textone=="rightkey")?score.innerHTML:score.innerHTML-=20;			
			alert(score.innerHTML);
			
			
		});
	</script>

</html>